/* 
    基本语法:
        选择器 声明块
        选择器{
                        属性:值;
                        属性:值;
              }
*/

选择器:{



    选择器的权重:
        内联样式        1,0,0,0
        id选择器        0,1,0,0
        类和伪类选择器  0,0,1,0
        元素选择器      0,0,0,1
        通配选择器      0,0,0,0
        继承的样式      没有优先级
        在样式后面添加!important会获得最高优先级,慎用
        
    简单选择器
        元素         (元素选择器)
        #id          (id选择器)
        .class属性名 (类选择器)
        *            (通配选择器)

    组合选择器
        交集:选择器1选择器2选择器n      (选择符合全部要求的元素,如有元素选择器必须使用元素选择器开头)
        并集:选择器1,选择器2,选择器n    (同时选择多个选择器对应的元素,可与交集合用)


    关系选择器(选的是后面那个)(可以用做快捷键在HTML快速生成标签*数量)
        子元素选择器:   父元素>子元素   (可以继续往下选择)
        ▲后代元素选择器: 祖先 后代       (中间是空格)(用在移入父显示父子)
        兄弟元素选择器: 兄+下一个弟     (必须紧随其后中间不能有其它元素)
                        兄~下面所有弟   (必须是下面,在兄上面的无法选中)
            /* 选择器符号旁边可以有空格 */
            /* 我附庸的附庸不是我的附庸 */
            /* 父元素也属于祖先元素 */
    属性选择器
        [属性名]         选择含有指定属性的元素
        [属性名=属性值]  选择含有指定元素和属性值的元素
        [属性名^=属性值] 选择属性值以指定值开头的元素
        [属性名$=属性值] 选择属性值以指定值结尾的元素
        [属性名*=属性值] 选择属性值含有某值结尾的元素

    伪类选择器(不存在的类,特殊的类,一般情况都是使用:开头,用来描述一个元素的特殊状态,如第一个元素,被点击的元素,鼠标移入的元素)
        :first-child 第一个子元素 
        :last-child  最后一个子元素
        :nth-child() 选择第n个子元素(不是索引)
                        n     选择所有
                        2n    选择偶数位
                        even  选择偶数位
                        2n+1  选择奇数位
                        odd   选择奇数位
            以上这些伪类都是根据所有的子元素进行排序(绝对位置),如ul>li:first-child 第一个元素必须是li才会选中
        
        :first-of-type        第一个此类型元素
        :last-of-type         最后一个此类型元素
        :nth-last-of-type()   第n个此类型元素
        :not()       将符合条件的元素剔除(中间可嵌套其它选择器如 ul>li:not(:nth-of-type(3))即除第三个li外)
      
        :link        用来表示链接(a链接独有,一般与a连用 a:link)
        :visited     用来表示访问过的链接(由于隐私原因只能修改链接颜色)(a链接独有)
        :hover       用来表示鼠标移入悬停的状态(所有元素都可使用)
        :active      用来表示鼠标的点击(所有元素都可使用)

    伪元素选择器(伪元素,表示页面中一些特殊的并不真实存在的元素,用来表示特殊的位置,使用::开头)
        ::first-letter   表示第一个字母
        ::first-line     表示第一行
        ::selection      表示选中内容
        ::before         ▲元素的开始位置,必须结合content属性使用(添加开头的内容再修改样式)
        ::after          ▲元素的结束位置,必须结合content属性使用(添加开头的内容再修改样式)
}

样式:{      
    长度单位{
        像素px:   在不同设备的显示效果不同
        百分比%:  可将属性值设置为相对于父元素的百分比
        em:       em随字体大小改变,1em=1font-size,一般16px
        rem:      相对于根元素(html)字体大小计算的,仅随html元素样式改变
    }
    颜色单位{
        颜色名 (trasparent 透明的)
        rgb(255,255,255)
        rgba(255,255,255,.5)   最后一个参数表示透明度,0表示透明,1表示不透明
        #ffffff                每一个颜色的浓度00-ff,十六进制,如果重复可以简写如#ff0
        hsl(360,100%,100%)     色相(0-360),饱和度(0%-100%),亮度(0%-100%)
        hsla(360,100%,100%,0.5)最后一个参数表示透明度
    }
    文档流(normal flow):{
        -网页是一个多层结构,通过CSS可以为每一层设置样式,用户只能看到最上面一层.
        -最底下一层叫文档流,文档流是网页的基础,我们所创建的元素默认都是在文档流中排列.
        -对于我们来说元素只有两个状态:在文档流中和不在文档流中

        元素在文档流中的特点:
              -块元素
                    块元素会在页面中独占一行
                    默认宽度是父元素的全部(会把父元素撑满)
                    默认高度是被内容(子元素)撑开的高度
              -行内元素
                    行内元素会在页面中独占一行,只占自身大小
                    行内元素在页面中从左向右水平排列,如不能装下则换行
                    默认高度和宽度都是被内容撑开

         脱离文档流的特点：(不独占一行的块元素)
                1  行内元素脱离文档流后会变成块元素，特点和块元素一样（不需要区分块和行内）
                2  块元素不再独占一行
                3  脱离文档流后的块元素高宽默认都是被内容撑开（可以设置）
    }
    盒模型(box model框模型):{
        -CSS将页面中的所有元素都设置为了一个矩形的盒子,页面布局即为摆放盒子
            默认情况下，盒子的可见框大小由内容区，内边距和边框共同决定。

        box-sizing 用来设置盒子尺寸的计算方式
            可选值：content-box   默认值，宽度和高度用来设置内容区的大小
                    border-box    宽度和高度用来设置整个盒子可见区域的大小（即内容区+边框）

        盒子由以下几个部分构成:
            内容区(content)
                width(默认auto) 
                heigth(默认被内容撑开) 设置内容区的宽度和高度

            内边距(padding) 默认值为0
                ▲简写属性:padding:上宽度 右宽度 下宽度 左宽度; 
                padding-XXX,单独设置某一边的样式,top right bottom left,属性值为none时无样式

            边框(border) 会影响整个盒子大小,三个属性缺一不可 
                ▲简写属性:  border:宽度 颜色 样式;  (不分先后)
                            border-XXX,单独设置某一边的样式,top right bottom left,属性值为none时无样式

                    border-width 边框的宽度:可以指定一到四个值,上右下左,值少时与对边相等
                                            border-XXX-width 单独指定某一边的宽度,top right bottom left 
                    border-color 边框的颜色:可以指定一到四个值,上右下左,值少时与对边相等,不写则默认color(前景色)的颜色
                                            border-XXX-corlor 单独指定某一边的颜色,top right bottom left
                    border-style 边框的样式,可以指定一到四个值,上右下左,值少时与对边相等
                                            solid实线 dotted点状虚线 dashed虚线 double双线 none无边框
                -可见框大小等于内容区+内边距+边框

                (透明的边框会显示背景颜色，属性background-clip:content-box 将背景颜色设置到内容区)

            外边距(margin)  默认值为0
                ▲简写属性:margin:上宽度 右宽度 下宽度 左宽度;
                ▲padding-XXX,单独设置某一边的样式,top right bottom left(上和左是移动自己，可设置负数)
                仅当父元素范围为auto,外边距超出父元素范围,父元素并不会外边距被撑开
        
        水平方向的布局:
            左外边距+左边框+左内边距+宽度+右内边距+右边框+右外边框 = 父元素内容区的宽度
            若不成立(过度约束)则浏览器会自动调整
                -无auto的情况:自动调整margin-right(可以是负值)
                -若width, margin-left, margin-right 三者中有值为auto
                        有一个auto则自动调整该值大小以使等式成立
                        若宽度和外边距设置为auto,则外边距默认为0,宽度调整到最大(默认)
                        若宽度固定,外边距为auto,则左右两外边距值相等(水平居中)
                            示例:width:XXpx margin:0 auto; (水平居中,上下外边距为0)

        垂直方向的布局:
            默认情况下父元素的高度被内容撑开
            子元素是在父元素的内容区中排列的

                -若子元素的大小超过了父元素,则子元素会从父元素中溢出
                overflow 属性来设置父元素如何处理溢出的子元素 flow 流
                            可选值:
                                visible 默认值,子元素会溢出且在父元素外部显示
                                hidden  溢剪没,溢出的内容将会被裁减不会显示
                                scroll  滚动条,生成两个滚动条来查看完整内容
                                auto    根据需要生成滚动条
                                -使用 overflow-x 单独处理水平方向,overflow-y 单独处理垂直方向,属性值一样
            
            !垂直外边距的重叠(同一个BFC下)
                -相邻的垂直方向外边距会发生重叠现象
                -兄弟元素  (有利,不需要处理)
                    兄弟元素的相邻垂直外边距会取两者之间较大值
                    特殊情况
                        若一正一负,则取两者之和
                        若都是负值,则取绝对值较大的
                -父子元素(影响布局,需要处理)
                    父子元素相邻外边距,子元素会传递给父元素(上外边距)(一起推下去了)
                
                解决: 父元素::after{
                    content:"";
                    display:table;
                }以空元素作为边界
                   
        行内元素的盒模型
            行内元素不支持设置高度和宽度
            行内元素可以设置padding,border,margin. 但垂直方向的它们不会影响页面布局
            
            display 用来设置元素显示的类型
                    可选值: inline 将元素设置为行内元素
                            block  将元素设置为块元素
                            inline-block 将元素设置为行内块元素(当成一个字，空也占空间)(既可以设置宽高又不独占一行)
                            table  将元素设置为一个表格
                            none   元素不在页面中显示
                            
            visibility 用来设置元素显示的状态
                    可选值: visible 默认值,元素在页面中正常显示
                            hidden  元素在页面中隐藏,但仍然占据位置

        轮廓阴影和圆角：
            outline     用来设置元素的轮廓线，用法和border一样（可能会盖住旁边的内容）
                        不同的是，轮廓不会影响可见框的大小（经常设置:hover里）

            box-shadow  用来设置元素的阴影效果，阴影不会影响页面布局
                        （水平偏移量 垂直偏移量 模糊半径 阴影的颜色）   颜色一般用rgba

            border-radius 用来设置四个角的圆角半径大小
                          左上 右上 右下 左下  （亦可单独指定，详见手册）
                          每个值也可以分别指定 横向偏移像素/纵向偏移像素
                          50% 设置为圆形


    }
    浮动{
        float 属性设置元素的浮动，通过浮动可以使一个元素向左或向右移动
              !!不再独占一行（设置宽度后）
              元素浮动以后便脱离了文档流，不占用文档位置，水平布局等式不需要强制成立
              元素下边还在文档流中的元素自动向上移
              可选值
                    none  默认值，元素不浮动
                    left  元素向左浮动
                    right 元素向右浮动

        浮动的特点:（新一层）（让元素可以水平排列）
            1  不再占用文档流中的位置
            2  浮动元素会向父元素的左侧或右侧移动
            3  浮动元素默认不会从父元素中移出
            4  浮动元素移动时不会超过它前面的其他浮动元素 （他也不会超过非浮动元素，但后面的会顶上他的位置，叠在下方）
            5  如果浮动元素上边是一个没有浮动的块元素，则浮动元素也无法上移 （非浮动会占据一整行）
            6  浮动元素不会超过他上边的浮动元素，最多一在同一行
            7  浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围（可以设置文字环绕图片效果）
        
        脱离文档流的特点：
            1  行内元素脱离文档流后会变成块元素，特点和块元素一样（不需要区分块和行内）
            2  块元素不再独占一行
            3  脱离文档流后的块元素高宽默认都是被内容撑开（可以设置）


    }
    BFC(块级格式化环境){
        开启BFC后会变成一个独立的布局区域（相当于独立，被框住）（新的块元素，左边可以有其它元素,若是浮动，右边还可以有其它元素）

        特点:
            1  开启BFC的元素不会被浮动元素所覆盖(这里指它外部的浮动元素)
            2  开启BFC的元素，它的子元素不会与父元素外边距重叠
            3  开启BFC的元素可以包含浮动的子元素

        开启方式:
            1  设置浮动（布局被打乱，宽度丢失）
            2  设置行内块（宽度丢失）
            3  ▲将元素的overflow设置为非visible的值 (即在BFC中才无法溢出)(高度被内容撑开)
                   常设置为overflow:hidden 开启BFC  (▲设置在父元素中)(即设置在不想塌陷的元素上)
            4  ▲ clear
                    作用  :清除浮动元素对当前元素的影响（自适应）
                    原理  :自动为元素添加一个▲上外边距（只会往下走，不会挤到右边）
                    可选值:left，right， ▲both（清除浮动元素影响最大的那侧）

                    ▲最佳设置在父元素的伪元素::after中
                        父元素(本元素)::after{
                            content:"";
                            display:block;(或者table)(块元素才能作为内容的最后撑起高度)
                            clear: both;
                        }
            5  position的值不是 static或者relative

    }
    高度塌陷和上外边距重叠解决办法{
        思路:在父元素前或后设置一个空的块*元素，用来阻隔上外边距重叠，或者作为浮动元素后面的内容防止塌陷
        设父元素类名.clearfix,则: 

            .clearfix::before,
            .clearfix::after{
                content:'';
                display:table;
                clear: both;
            }

    }
    定位(position){
        定位是一种更加高级的布局手段，通过定位可以将元素摆放到任意位置
        偏移量: top bottom left right  开启定位后可设置偏移量，偏移量是距离
                ▲▲▲偏移量默认值是元素本来位置的值
                一般子元素是绝对定位，父元素要开启相对定位(不设置偏移量)

        可选值:
            static     默认值，不开启定位

            relative  相对定位 (参照原位置，升层，不脱离，不改变)(灵魂出窍)
                1  若不设置偏移量，则不发生▲任何变化  (仍占据原本的空间)
                2  相对定位是参照于其在文档流中的位置进行定位的
                3  相对定位不会使元素脱离文档流
                4  相对定位会提升元素的层级
                5  相对定位不会改变元素性质，块还是块，行内还是行内

            absolute  绝对定位 (参照包含块，升层，脱离，改变)
                1  如不设置偏移量，则▲元素位置不发生改变    (兄弟元素会在底下顶替他原来位置)
                2  绝对定位是相对其▲包含块进行定位的
                3  绝对定位会提升元素的层级
                4  开启绝对定位后会脱离文档流
                5  绝对定位会改变元素性质，变成块元素，会被内容撑开

                    包含块:正常情况下:离当前元素最近的祖先块元素
                           绝对定位的:离他最近的·开启了定位的祖先元素(无则body)

            fixed     固定定位 (参照浏览器视口，升层，脱离，改变)(类似绝对定位)(小广告)

            sticky    粘滞定位 (参照包含块，升层，不脱离，不改变)(类似相对定位)
                可以在元素到达某个位置是将其固定(为了让其保留在视口内，不随滚轮运动)

        绝对定位元素的布局:
        
            ▲过度约束自动调整顺序:宽高>偏移量>外边距 
                不会动被约束的量，而是调整不被约束的量，不被约束量中优先级在上
            有auto则调整auto，可设置auto的值:margin width left right （偏移量默认auto且靠左上）

            水平布局: 
                left+左外边距+左边框+左内边距+宽度+右内边距+右边框+右外边距+right=包含块的内容区宽度
            垂直布局(文档流中无此等式)
                top+上外边距+上边框+上内边距+高度+下内边距+下边框+下外边距+bottom=包含块的内容区高度

        垂直水平双方向居中: 
        {
            设置宽高
            margin:auto;
            left:0;
            right:0;
            top:0;
            bottom:0;
        }思路:宽高固定后，过度约束偏移量，则自动调整四个方向margin，使其居中
        使子元素撑满包含块{
            不设置宽高
            过度约束偏移量
        }

    }
    元素层级(z-index){
        对于开启了定位的元素，可以通过z-index属性来指定元素层级
        z-index需要一个整数作为参数，值越大元素层级越高，越优先展示
        若同级则优先展示靠下的元素
        祖先元素的层级再高也不会盖住后代元素(水涨船高)

        修改元素层级以控制要显示的内容(js)
            .img-list li:nth-child(n){
                z-index: 1;
            }
            修改即可
    }
    字体{
        简写{
            font 可以设置字体所有相关属性
            语法: 字体大小/行高 字体族
                行高不写将会使用默认值
                字体大小前面还可以加其它属性如italic bold
                    font-weight 字重 加粗
                        可选值 noemal 默认值
                               bold   加粗
                               100-900 九个级(没用)
                    font-style  字体风格
                        可选值  normal 默认值
                                italic 斜体
        }
        相关属性{
        color      设置字体颜色(前景色)
        font-size: 设置字体大小
                        相关定位:em 相当于当前元素的字体大小倍数
                                rem:相对于跟元素的字体大小倍数
        font-family:设置字体族(字体样式)
                        可选值:serif       衬线字体
                               sans-serif  非衬线字体
                               monospace   等宽字体
                               或者具体字体名
                    可同时指定多个字体，用逗号隔开，浏览器优先使用前面的字体
        @font-face:{
            font-family:字体名;
            /* 字体名字，可自取名 */
            src:url(服务器字体路径) format(tuetype)
        }
        }
        图标字体(icomfont){
            FontAwesome 图标字体
                1  官网下载新版 解压
                2  将CSS和webfonts移动到项目中
                3  将 all.css 引入网页中(使用link)
                4  使用图标字体:
                        直接通过类名来使用图标字体(格式基本固定)(fas或fab或fa)
                        <i class="fas 图标码" style="字体大小颜色"></i>

                        通过伪元素设置图标字体
                            1  找到要设置的图标通过before或after选中
                            2  在content中设置字体编码   '\字体编码'
                            3  设置字体样式
                                font-family: 'Font Awesome 5 Brands';
                                font-weight: 900;
                                或(试一下)(?无单位)
                                font-family: 'Font Awesome 5 Free';
                                font-weight: 900;
                            
                        也可以通过实体的方式 &#x图标编码;
       }
        行高{
        line-height 行高
                    行高会在字体框的上下平均分配
                    将行高设置为和高度一样的值，这样会使单行文字垂直居中
                    行高-字体大小=行间距
            单位: px  em(默认单位)


       }   
                            
                
    }
    文本对齐和样式{
        text-align 文本的水平对齐
            可选值: left 左对齐
                    right 右对齐
                    center 居中对齐
                    justify 两端对齐
        
        vertical-align 设置元素垂直对齐的方式
            可选值: baseline 基线对齐(默认)(导致图片有空隙)
                    top     顶端对齐
                    bottom  底端对齐
                    middle  居中对齐(基线+x字母的一半)
        
        text-decoration  设置文本修饰
            可选值:  none        无
                    underline    下划线
                    line-through 删除线
                    overline     上划线
                text-decoration: underline red dotted;(红色虚线)

        white-space  空白处理方式
            可选值  normal 正常
                    nowrap 不换行
                    pre  保留所有空白
            省略号效果{
                设置宽度
                white-space:nowrap;
                overflow: hidden;
                text-overflow:ellipsis;
            }       


    }
    背景{
        background-color    设置背景颜色
        background-image    设置背景图片
                                      可以同时设置背景颜色和背景图片，背景色会成为图片的背景色
                                      background-image: url("图片链接");
                                      -若图片小于元素:平铺以铺满   -若图片大于元素:则无法完全展示
        background-repeat   设置背景重复方式
                                      可选值:   repeat    默认值，背景会沿x轴 y轴双方向重复平铺
                                                repeat-x  沿着x轴重复平铺
                                                repeat-y  沿着y轴重复平铺
                                                no-repeat 不重复
        background-position 设置图片位置
                                       通过 top left right bottom center 几个表示方位的词设置位置
                                            background-position : top left ;  背景图片在元素的左上角
                                            必须同时指定两个值，若只写一个则第二个默认center
                                       ▲通过偏移量来指定背景图片的位置
                                            background-position :水平偏移量 垂直偏移量;
        background-clip     设置背景的范围
                                       可选值:  border-box  默认值，背景会出现在边框底下
                                                padding-box 背景只出现在内容区和内边距
                                                content-box 背景只会出现在内容区 
        background-origin   背景图片偏移量计算的原点
                                        可选值: padding-box 默认值，background-position 从内边距处计算
                                                content-box 背景图片的偏移量从内容区处计算
                                                border-box  背景图片从边框处开始计算
        background-size     设置背景图片的大小
                                        第一个值表示宽度，第二个值表示高度
                                        若只写一个，则第二个默认auto
                                        也可以是百分比
                                        cover   覆盖，图片比例不变，将元素铺满(大则显示不全)
                                        contain 包含，图片比例不变，将图片完整显示(经常无法铺满元素)
        background-attachment 设置背景图是否跟随元素移动
                                        可选值:  scroll 默认值，背景图片会跟随元素移动
                                                 fixed  背景图片会固定在页面中，不会随元素移动,相对视口
        简写 background 所有属性可一并写入
                                center center/contain 大小必须写在位置后面         位置/大小
                                content-box border-box  计算原点写在背景范围前面   原点 范围
                                其它顺序可随意

        练习:
                            单列像素图片(与元素高度一致)平铺作为渐变背景{
                                设置宽高
                                background-image: url("图片链接");
                                background-repeat:repeat-x;
                            }

                            超链接背景图片三种状态的切换(原始状态 鼠标移入 鼠标点击){
                                a:link{设置为块元素 设置宽高 设置背景图片1}
                                a:hover{设置背景图片2}
                                a:active{设置背景图片3}
                            }

                            CSS-sprite 雪碧图(有效避免闪烁){
                                a:link{设置为块元素 设置宽高 设置雪碧图}
                                a:hover{background-position 设置雪碧图偏移量}
                                a:active{background-position 设置雪碧图偏移量}
                            }

        渐变
                            线性渐变
                                background-image: linear-gradient(方向,颜色一 开始位置,颜色二开始位置,颜色n 开始位置);
                                沿直线变化方向(to left     to right     to top     to bottom)
                                沿角度变化方向(360deg)
                                沿圈数变化方向(0.25turn)
                                repeating-linear-gradient()可以重复平铺的线性渐变

                            径向渐变
                                background-image: radial-gradient()
                                p94集
                                repeating-radial-gradient()可以重复平铺的径向渐变


    }
    表格{
        <table>
        <thead><th><td></td></th></thead>
        <tbody><tr><td></td></tr></tbody>
        <tfoot></tfoot>
        </table>

            td里的属性(属于行内元素)
                colspan="横向合并单元格的数量"(先删除其它被合并的)
                rowspan="纵向合并单元格的数量"

        table 也属于块元素，但宽度不是100%，而是被内容撑开的宽度，右边是margin
                border-spacing  指定边框之间的距离
                border-collapse:collapse; 设置边框的合并

        注意事项:
                如果表格中没有使用tbody是直接使用tr
                那么浏览器会自动创建一个tbody，并且将tr全部放入其中
                ▲ tr不是table的子元素  无法通过子元素选择器选到

        td内容居中:
                默认情况下元素在td中是垂直居中的(垂直方向的中间)
                可以通过vertical-align:middle;来修改 (该属性原本只能影响文本内容，在td中什么内容都能影响)
                text-align:center;可以设置水平居中方式(无法影响块元素，块元素要用margin)

        dispaly:table-cell;
                将元素设置为单元格，则以后td里能用的这里都能用
                但td只能和td在一行，其它元素会挤到下面
        
    }
    表单{

        用于将本地的表单提交给远程的服务器
        
        form标签 创建一个表单
            form的属性
                action  表单要提交的服务器地址     <form action="服务器地址"></form>

        input 行内块元素
            文本框   <input type="text" name="">       必须指定name属性值                                                      
            邮箱框   <input type="email" name="">      输入格式不对会自动弹出提示
            密码框   <input type="password" name="">   必须指定name属性值
            提交按钮 <input type="submit" value="">    可以通过value指定按钮的文字(默认是"提交")
            按钮     <input type="button" value="">    ▲最佳是通过<button></buttom>标签设置按钮，属性值和input一样，按钮名写标签中，亦可放图片
            重置按钮 <input type="reset" value="">     回到默认值
            提交颜色 <input type="color">              IE不支持

            多选按钮 <input type="checkbox" name="" value="">
            单选按钮 <input type="radio" name="" value="">
                一般加一个<label for="关联控件id" form="所属表单id列表"> </label>包裹，这样在点击文本的时候也可以选中              
                name属性相同为一组，单选只能选一个(互斥)
                value为选中选项的的值，如name=value
                hecked可以设置为默认选中(只有属性名无需属性值)

        select下拉列表
                    <select name="">
                        <option value="">选项一</option>
                        <option value="">选项二</option>
                    </select>                         
                                                        selected可以设置为默认选中

        其它表单属性:
                    placeholder     占位符，不输入时显示的信息
                    target          属性规定提交表单后在何处显示响应。
                    autocomplete    属性值off关闭自动补全，on开启 autocomplete="off"
                    readonly        将表单项设置为只读，可以提交数据
                    disable         将表单项设置为禁用，不会提交
                    autofocus       设置表单自动获取焦点
                    

    }
    过渡{
        过渡(transition)
                通过过渡可以指定一个属性发生变化时的切换方式
                    变化属性 时间 时序函数 延迟

                transition  可以设置所有相关属性  注意:若有两个时间，则第一个是持续时间，第二个是延迟

                transition-property
                            指定要执行过渡的属性，多个属性用逗号隔开，如果所有属性都有过渡则 all
                            必须是从一个有效数值向另一个有效数值过渡

                transition-duration
                            指定过渡效果的持续时间，单位s ms

                transition-timing-function
                            指定过渡的时序函数 
                                可选值:  ease    默认值。慢速开始，加速，慢速结束
                                        linear   匀速运动
                                        ease-in  加速运动
                                        ease-out 减速运动
                                        ease-in-out 先加速后减速
                                        cubic-bezier() 使用贝塞尔曲线指定时序函数 https://cubic-bezier.com
                                        steps()  分布执行过渡效果，第二个值指定变化的瞬间 end 默认值 start
                                                一般n-1步

                transition-delay
                            指定过渡效果的延迟，等待一段时间执行
    }
    动画{
        可以自动触发动画效果(与过渡类似)
                    
                必须先设置一个关键帧(独立) 里面百分比可以看作是选择器，可以分组
                @keyframes 关键帧名 {
                    from{}   表示动画开始时的属性值，或者用0%{}
                    n%{}     可不写，指在该时间下的属性值
                    to{}     表示动画结束时的属性值，或者用100%{}
                }

                然后引入关键帧
                animation-name: 关键帧名;

                设置持续时间
                animation-duration

                设置动画执行延迟
                animation-delay

                设置动画时序函数
                animation-timing-function

                设置迭代计数(执行次数)
                animation-iteration-count
                            次数  infinite无限次
                            
                设置执行方向
                animation-direction
                            normal  reverse反向  alternate来回反复(双数周期逆向)  alternate-reverse(单数周期逆向)
                
                设置动画执行状态
                animation-play-state
                            running 默认值 执行    paused 暂停

                设置动画的填充模式(结束位置)
                animation-fill-mode
                            none 默认值 回到原点   forwards 停到结束位置   backwards 动画延迟等待时就在开始from位置  both  结合forwards和backwards

                animation 简写属性
    }
    变形{
        transform   变形不会影响到页面布局
                    个人理解:相当于开启相对定位，不脱离文档流但提高层级
                    transform-origin 变形的原点 默认center  或者 0px 0px 


            平移
            translateX()   沿x轴方向平移
            translateY()   沿y轴方向平移
            translateZ()   沿x轴方向平移
                    取值也可以是百分比，但相对自身进行计算
                    可用于在内容大小不确定时居中{
                        top: 50%;
                        left:50%;
                        transform:translateX(-50%) translateY(-50%);
                    }(常规方法是宽高固定，过渡约束偏移量0，margin:auto;)

                    z轴平移，调整垂直于屏幕的位置，值越大，离人眼越近
                    默认情况下不支持透视，必须设置网页的视距
                    perspective: ; 一般给html设置，值在800-1200px左右比较合适

            旋转(正方向顺时针)
            rotateX()     以x轴为轴旋转
            rotateY()     以y轴为轴旋转
            rotateZ()     以z轴为轴旋转
                    单位 角度deg  圈数turn
                    轴是相对于元素本身的坐标系而不是网页
                    也就是说会变动
                    所以要注意是先平还是先旋转，前后顺序会导致不同的结果
                    backface-visiblity:;  设置是否显示元素的背面  visible 默认显示  hidden 隐藏
                    opacity 指定透明效果
                    transform-style: preserve-3d;设置3D变形效果

            缩放
            scaleX()  水平方向缩放
            scaleY()  垂直方向缩放
            scale()   垂直水平双方向缩放
            scaleZ()  Z轴方向缩放，2D元素缩放无任何效果

    }
    弹性盒{
        flex 弹性盒，主要用来代替浮动完成布局
             flex可以使元素具有弹性，让元素可以跟随页面的大小改变

        弹性容器:
                设置弹性容器
                display: flex;        设置块级弹性容器
                display: inline-flex; 设置行内弹性容器


                主轴:设置弹性元素在容器中的排列方向
                flex-direction: row;           默认值，横向排列，自左向右
                flex-direction: row-reverse;  反向横向排列，自右向左 (颠倒)
                flex-direction: column;        纵向排列，自上向下 (卡冷)
                flex-direction: column-reverse;反向纵向排列，自下向上

                换行:设置弹性元素是否自动换行
                flex-wrap: nowrap;       默认值，不换行，不被包住
                flex-wrap: wrap;         沿辅轴方向换行
                flex-wrap: wrap-reverse; 沿辅轴反方向换行

                主轴和换行的简写
                flex-flow:;

                主轴方向
                    主轴元素排列(用元素的自动拉伸代替比较好)
                    justify-content:flex-start;   沿主轴起边排列(正向)，空白在最后                   
                    justify-content:flex-end;     沿主轴终边排列(逆向)，空白在最前
                    ▲justify-content:center;      元素居中排列
                    justify-content: space-between; 空白在元素之间
                    justify-content:space-around; 空白分配到每个元素两侧
                    justify-content:space-evenly; 空白分配到每个元素单侧(元素之间还有两边的距离相等)


                辅轴方向
                    辅轴上元素排列
                    align-items:stretch;    默认值，将在同一行的元素的长的拉到相同的值
                    align-items:flex-start; 元素不拉伸，沿辅轴起边对齐
                    align-items:flex-end;   元素不拉伸，沿辅轴终边素对齐
                    ▲align-items:center;    元素不拉伸，居中对齐
                    align-items:baseline;   元不拉伸，沿辅轴基线对齐

                    辅轴上空白分布
                    align-content:center;      元素团上下空白相等
                    align-content:flex-start;  空白在辅轴最下面
                    align-content:flex-end;    空白在辅轴最上面
                    align-content:space-around;每行上下空白相等
                    align-content:space-evenly;空白分配到每行元素单侧(元素之间还有两边的距离相等)
                    align-content:space-between;空白在中间


        弹性元素:
                弹性容器的子元素是弹性元素(弹性项)，不脱离文档流
                一个元素可以同时是弹性容器和弹性元素

                覆盖容器设置的纵向拉伸align-items属性，单独设置自身
                align-self:;

                伸展:设置元素的横向(主轴)伸展系数 (当父元素有多余空间时，按各子元素的系数的比例 分配多余空间伸展)
                flex-grow:;

                收缩:设置元素的横向(主轴)收缩系数 (收缩大小与 系数和元素大小相关)
                flex-shrink:;

                设置元素在主轴上的基础长度(宽度)
                flex-basis:;

                统一设置元素弹性
                flex:增长系数 收缩系数 基础长度;
                flex:initial;   等于 flex: 0 1 auto 默认值，会缩
                flex:auto;      等于 flex: 1 1 auto 自动伸缩
                flex:none;      等于 flex: 0 0 auto 不会伸缩

                元素的排列顺序
                order:;


    }
    移动端适配{

        默认情况下，移动端的网页都会将视口设置为980像素(即能看见980像素宽度的内容)
            以确保PC端网页能在移动端正常访问(导致元素看起来会很小)
            若网页大于980，网页内容会被等比缩放以显示完整网页
            为解决这个问题，大部分网站都会专门为移动端设计网页

        编写移动端页面时，必须要确保有一个比较合理的像素比
            1 css像素 = 2 物理像素  (即1:2)
            1 css像素 = 3 物理像素  (即1:3)
        即屏幕物理像素若为750，合理像素是1:2，则视口宽度最佳为375像素，则称为完美视口
        但不同设备的完美视口不一样，故不能直接写死视口宽度

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        视口宽度=设备完美视口宽度   初始缩放比例1.0(同样是设置完美视口)

        不同设备的完美视口不一样，若元素直接设置像素则会导致内容大小固定
        不能随视口变化而变化，故移动端页面不能使用px布局(必须以vw为单位)
        所有里面的内容必须相对视口的比例来设置

        vw 表示视口宽度 100vw = 一个视口宽度

        常见设计图宽度:  750px  1125px
            设备用375的视口宽度显示本该是750的设计图，相当于把图缩一倍
            而设备在显示视口时用两个物理像素显示一个cs像素，又放大一倍，约等于没变
        设计图总宽度px = 100vw 

        1 rem = 1 html字体大小
            我们想让 1rem= 100/750vw
            但网页中字体大小最小是12px，如果设置了一个比12px小的字体，则默认为12px (0px例外)
            故经常扩大40倍
            1rem = 100/750vw*40
            元素宽度/40rem 即表示换算后的大小


        响应式页面布局
            网页可以根据不同的设备或窗口的大小呈现出不同的效
            (更推荐移动端PC两个页面)
            
            原则:移动端优先，渐进增强

            媒体查询
                可以为不同设备或设备的不同状态设置不同的样式
                @media 查询规则{}

                查询规则  (规则之间用括号和连接词)
                    媒体类型:
                              all/所有 print/打印机 csreen/带屏幕设备 speech/屏幕阅读器
                              ， 或    连接媒体类型
                              and 与
                              only只有  兼容老版本浏览器
                              not 除了，正好相反
                    媒体特性: 
                              width  视口的宽度
                              height 视口的高度
                              min-weith 视口最小宽度
                              max-weith 视口最大宽度
                                样式切换的分界点称其为断点
                                    小于768 超小屏
                                    大于768 小屏幕
                                    大于992 中屏幕
                                    大于1200大屏幕

            完整写法
                @media only screen and (min-weith:500px) and (max-weith:700px){
                    样式
                }
    }